<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同身高区间的女性数量&不同年龄区间的女性数量</title>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/vintage.js"></script>
    <style>
        .group{
            margin: auto;
            display: flex;
            justify-content: space-between;
            width: 1300px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="group">
    <div class="cart1" style="width: 600px;height: 500px;"></div>
    <div class="cart2" style="width: 600px;height: 500px;"></div>
</div>
<script>
    var data1 = {{ height_area_count_data|tojson }}
    var data2 = {{ age_area_count_data|tojson }}

    var MyCharts1 = echarts.init(document.querySelector('.cart1'),'vintage')
    var MyCharts2 = echarts.init(document.querySelector('.cart2'),'vintage')

    function getOption(title_text,data,sign){
        var option = {
            title:{
                text:title_text,
                textStyle:{
                    fontSize:21,
                    fontFamily:'楷体'
                },
                left: 'center'
            },
            legend:{
                name:['人数'],
                left: 20,
                bottom:20,
                orient:'vertical'
            },
            tooltip:{
                trigger:'item',
                triggerOn:'mousemove',
                formatter:function (arg)
                {
                    return sign+'：'+arg.name+'<br/>'+'人数：'+arg.value+'<br/>'+'占比：'+arg.percent+'%'
                }
            },
            series:[
                {
                    type:'pie',
                    name:'人数',
                    data:data,
                    label:{
                        show:true
                    },
                    itemStyle:{
                        borderColor:'white',
                        borderRadius:10,
                        borderWidth:5
                    },
                    selectedMode:'multiple',
                    selectedOffset:10,
                    radius:['50%','80%'],
                    bottom: -10
                }
            ]
        }
        return option
    }
    var option1 = getOption('不同身高区间的女性数量',data1,'身高')
    var option2 = getOption('不同年龄区间的女性数量',data2,'年龄')
    MyCharts1.setOption(option1)
    MyCharts2.setOption(option2)
</script>
</body>
</html>